﻿@page "/admin/mention"
@using Moonglade.Mention.Common
@inject IMediator Mediator
@{
    ViewBag.Title = "Mentions";
    var mentionRecords = await Mediator.Send(new GetMentionsQuery());
}

@Html.AntiForgeryToken()

@section head {
    <style>
        .mentions-container {
            height: calc(100vh - 230px);
            overflow-y: scroll;
            overflow-x: hidden;
        }
    </style>
}

@section scripts{
    <script type="module">
        import * as utils from '/js/app/utils.module.js'

        window.deleteMention = function (mentionId) {
            callApi(`/api/mention/${mentionId}`, 'DELETE', {},
                (resp) => {
                    document.querySelector(`#mention-box-${mentionId}`).remove();
                });
        }

        window.clearMention = function () {
            callApi(`/api/mention/clear`, 'DELETE', {},
                (resp) => {
                    blogToast.success('Mention logs are cleared');
                    setTimeout(function () {
                        window.location.reload();
                    }, 800);
                });
        }

        utils.formatUtcTime();
    </script>
    <script>
        document.getElementById("mentionFilter").addEventListener("keyup", function () {
            var value = this.value.toLowerCase();
            var mentionItems = document.querySelectorAll(".mention-item-entry");

            mentionItems.forEach(function (item) {
                var text = item.textContent.toLowerCase();
                item.style.display = text.indexOf(value) > -1 ? "" : "none";
            });
        });
    </script>
}

@section admintoolbar{
    <div class="admin-toolbar pb-2 border-bottom mb-3">
        <div class="row">
            <div class="col">
                <a class="btn btn-outline-danger" href="javascript:;" data-bs-toggle="modal" data-bs-target="#clearmentionModal">
                    <i class="bi-trash"></i>
                    @SharedLocalizer["Clear all"]
                </a>
            </div>
            <div class="col-auto">
                <div class="text-muted admin-toolbar-text">
                    <span id="mention-count">@mentionRecords.Count</span> item(s)
                </div>
            </div>
        </div>
    </div>
}

<div>
    <input id="mentionFilter" type="text" class="form-control mb-3" maxlength="32" placeholder="Filter..">

    <div class="mentions-container">
        @foreach (var item in mentionRecords.OrderByDescending(p => p.PingTimeUtc))
        {
            <div class="mention-item-entry p-3 mb-2 rounded-3 shadow-sm border">
                <div id="mention-box-@item.Id" class="mention-item row">
                    <div class="col">
                        <strong>
                            <a href="@item.SourceUrl" target="_blank">@item.SourceTitle</a>
                        </strong>

                        <div>
                            <i class="bi-link"></i>

                            @item.TargetPostTitle
                        </div>

                        <div class="text-muted">
                            @item.Domain, @item.SourceIp,
                            <time data-utc-label="@item.PingTimeUtc.ToString("u")">@item.PingTimeUtc</time>, 
                            @item.Worker
                        </div>
                    </div>

                    <div class="col-auto">
                        <a class="btn btn-sm btn-outline-danger btn-delete" href="javascript:window.deleteMention('@item.Id');">
                            <i class="bi-trash"></i>
                        </a>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

<div class="modal fade" id="clearmentionModal" tabindex="-1" role="dialog" aria-labelledby="clearmentionModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="clearmentionModalLabel">@SharedLocalizer["Clear Mention Logs"]</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                @SharedLocalizer["Are you sure?"]
            </div>
            <div class="modal-footer">
                <a href="javascript:clearMention();" class="btn btn-outline-danger btn-clear">@SharedLocalizer["Clear Now"]</a>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">@SharedLocalizer["Cancel"]</button>
            </div>
        </div>
    </div>
</div>